<template>
    <div class="app-container">
        <a-card class="box">
            <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
                <a-form-item label="邮箱" :rules="rules.email" name="email">
                    <a-input v-model:value="form.email" placeholder="请输入邮箱" />
                </a-form-item>
                <a-form-item label="手机号" :rules="rules.telphone" name="telphone">
                    <a-input v-model:value="form.telphone" placeholder="请输入手机号" />
                </a-form-item>
                <a-form-item label="经度" :rules="rules.longitude" name="longitude" @focus="onMapOpen">
                    <a-input-group compact>
                        <a-input v-model:value="form.longitude" placeholder="请选择经度" />
                        <a-button @click="onMapOpen">
                            <template #icon>
                                <environment-outlined />
                            </template>
                        </a-button>
                    </a-input-group>
                </a-form-item>
                <a-form-item label="维度" :rules="rules.latitude" name="latitude" @focus="onMapOpen">
                    <a-input-group compact>
                        <a-input v-model:value="form.latitude" placeholder="请选择维度" />
                        <a-button @click="onMapOpen">
                            <template #icon>
                                <environment-outlined />
                            </template>
                        </a-button>
                    </a-input-group>
                </a-form-item>
                <a-form-item label="详细地址" :rules="rules.address" name="address">
                    <a-input v-model:value="form.address" placeholder="请输入详细地址" />
                </a-form-item>
                <div class="button-container">
                    <a-button type="primary" @click="onSubmit">保存</a-button>
                </div>
            </a-form>
        </a-card>
        <q-q-map ref="mapRef" @select="onSelectPosition" />
    </div>
</template>
<script setup name="RelationModule">
import { reactive, ref } from 'vue'
import { EnvironmentOutlined } from '@ant-design/icons-vue'
import { EmailRegular, TelphoneRegular } from '@iframe/tools/utils/regular.js'
import { query, update } from '/@/api/Inverter/Relation/index.js'
import { QQMap, notice } from '@iframe/tools/components'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
import { clone } from '@iframe/tools/utils/Tools'

const formRef = ref()
const mapRef = ref()
const form = reactive({})

const rules = reactive({
    email: [
        { required: true, message: '请输入邮箱' },
        { pattern: EmailRegular, message: '请正确输入邮箱' }
    ],
    telphone: [
        { required: true, message: '请输入手机号' },
        { pattern: TelphoneRegular, message: '请正确输入手机号' }
    ],
    longitude: { required: true, message: '请选择经度' },
    latitude: { required: true, message: '请选择维度' },
    address: { required: true, message: '请输入详细地址' }
})

const onMapOpen = () => {
    mapRef.value.open({
        longitude: form.longitude,
        latitude: form.latitude
    })
}

const onSelectPosition = loc => {
    form.longitude = loc.latlng.lat
    form.latitude = loc.latlng.lng
    form.address = loc.poiaddress
}

const onQuery = () => {
    query().then(result => {
        if (result.code === SUCCESS_CODE && result.data) {
            clone(form, result.data)
        }
    })
}

const onSubmit = () => {
    formRef.value
        .validate()
        .then(() => {
            update(form).then(result => {
                if (result.code === SUCCESS_CODE) {
                    notice.success('修改成功')
                    onQuery()
                }
            })
        })
        .catch(err => {
            console.error(err)
        })
}

onQuery()
</script>
<style lang="less" scoped>
.box {
    width: 800px;
    margin: 100px auto 0;

    .button-container {
        margin-top: 10px;
        text-align: center;
    }
}
</style>
